<template>
	<view class="sysDetail">
		<view class="sysDetail-plate-1" v-if="pageData !== ''">
			<view class="title">
				{{pageData.profile}}
			</view>
			<view class="time">
				{{pageData.send_time}}
			</view>
			<view class="content" v-html="pageData.message">
				
			</view>
			<view class="btm">
				<view class="btm-left">
					阅读：{{pageData.read_num}}
				</view>
				<view class="btm-right" @click="onLike">
					<image src="../../../../static/ic_praise_s.png" mode="widthFix" v-if="is_like"></image>
					<image src="../../../../static/ic_star_n.png" mode="widthFix" v-else></image>
					{{pageData.like_num}}
				</view>
			</view>
		</view>
		<view class="sysDetail-plate-2" v-else  style="padding-top: 100upx;">
			<u-empty text="暂时没有消息" mode="message"></u-empty>
		</view>
		<view class="sysDetail-plate-2" v-if="pageData !== ''">
			<view class="title">
				精选留言
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,//消息id
				rec_id:0,
				pageData:'',
				is_like:false
			};
		},
		onLoad(option) {
			this.id = option.id
			this.rec_id = option.rec_id
			this.getPageData()
		},
		created() {

		},
		methods:{
			// 点赞
			onLike(){
				console.log(this.id)
				uni.request({
				    url:this.$Url +'/index.php/app/users/like_message',
				    method:'POST',
				    data:{
				       message_id:this.id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						uni.showToast({
							title:res.data.msg,
							icon:'none',
							duration:1200
						})
						this.getPageData()
						this.is_like = true
				    }
				})
			},
			// 请求页面数据
			getPageData(){
				uni.request({
				    url:this.$Url +'/index.php/app/users/messageDetails',
				    method:'POST',
				    data:{
						id:this.id,
						rec_id:this.rec_id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.pageData = res.data.data
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.sysDetail{
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	padding-top: 10upx;
	.sysDetail-plate-1{
		width: 100vw;
		background-color: #fff;
		padding: 30upx;
		.title{
			font-size: 35upx;
			color: #333;
			margin-bottom: 30upx;
		}
		.time{
			font-size: 25upx;
			color: #999;
			margin-bottom: 30upx;
		}
		.content{
			font-size: 30upx;
			color: #444;
			margin-bottom: 50upx;
		}
		.btm{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26upx;
			color: #666;
			.btm-right{
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 40upx;
					margin-right: 10upx;
				}
			}
		}
	}
	.sysDetail-plate-2{
		padding: 30upx;
		color: #333;
		font-size: 36upx;
	}
}
</style>
